<template>
    <div>
        <template v-for="menu in menuList">
            <el-submenu v-if='menu.children.length>0' :index="menu.path" :key='menu.path'>
                <template slot="title">
                <i :class="menu.icon"></i>
                <span style="font-size:15px;font-weight:600" slot="title">{{menu.label}}</span>
            </template>
            <menu-item :menuList='menu.children'></menu-item>
            </el-submenu>
            <el-menu-item @click="selectMenu(menu)" v-else :index="menu.path" :key='menu.path'>
                <i :class="menu.icon"></i>
                <span style="font-size:15px;font-weight:600" slot="title">{{menu.label}}</span>
            </el-menu-item>
        </template>
    </div>
</template>

<script>
    export default {
        name: "MenuItem",
        props:['menuList'],
    methods:{
        selectMenu(item){
            this.$store.commit('selectMenu',item);
            this.$router.push({name:item.name});
        }
    }
    }
    
</script>

<style scoped>

</style>